<template>
  <div class="levelDescrip" :class="{'vipContent': $store.state.app.accountInfo && $store.state.app.accountInfo.level}">
    <div class="memberContent">
      <div class="tableNav">
        <span class="levelDescription">{{ $t('ndxStake.lvDescription') }}</span>
        <span class="pl">{{ $t('renew.vipModeTip') }}</span>
        <!-- <a :href="nowUrl" target="_blank">{{ $t('ndxStake.exchangeRate') }}</a> -->
      </div>
      <div class="memberTable flex" v-if="ruleList">
        <div class="tableHead">
          <ul>
            <li>{{ $t('ndxStake.level') }}</li>
            <!-- 升级方式1 -->
            <li>
              <p>{{ $t('renew.vipMode1') }}</p>
              <p>({{ $t('renew.vipMode11') }})</p>
            </li>
            <!-- 升级方式2 -->
            <li>
              <!-- <p>{{ $t('ndxStake.openCondition') }}</p> -->
              <p>{{ $t('renew.vipMode2') }}</p>
              <p>({{ $t('ndxStake.ndxStakes') }})</p>
            </li>
            <li>{{ $t('ndxStake.serviceCharge') }}</li>
            <!-- 每日抽奖 -->
            <li class="drawLi" v-if="$store.state.app.language === 'en' && $store.state.app.scatter.chain !== 'eos'">
              <p>{{ $t('nav.dailyLuckyDraw') }}</p>
              <p>(per day)</p>
            </li>
            <li class="drawLi"
              style="height: 40px; line-height: 40px; padding-top: 0;"
              v-else-if="$store.state.app.language !== 'en' && $store.state.app.scatter.chain !== 'eos'">
              <p>{{ $t('nav.dailyLuckyDraw') }}</p>
            </li>
            <li class="drawLi" v-else-if="$store.state.app.language === 'en'" style="line-height: 20px; height: 80px; padding-top: 10px;">
              <p>{{ $t('nav.dailyLuckyDraw') }}</p>
              <p>(per day)</p>
              <p>
                <span class="lookDetail" @click="$router.push('/lucky-draw')">{{ $t('ndxStake.admin') }} ></span>
              </p>
            </li>
            <li class="drawLi" v-else>
              <p>{{ $t('nav.dailyLuckyDraw') }}</p>
              <p class="lookDetail" @click="$router.push('/lucky-draw')">{{ $t('ndxStake.admin') }} ></p>
            </li>
            <!-- 糖果空投 -->
            <li v-if="$store.state.app.scatter.chain !== 'eos'">
              <p>{{ $t('ndxStake.exclusiveAirdrop') }}</p>
            </li>
            <li v-else style="line-height: 20px; height: 60px; padding-top: 10px;">
              <p>{{ $t('ndxStake.exclusiveAirdrop') }}</p>
              <p class="lookDetail" @click="$router.push('/candy-airdrop')">
                <span>{{ $t('ndxStake.admin') }} ></span>
              </p>
            </li>
            <!-- 免费CPU -->
            <!-- <li v-if="$store.state.app.scatter.chain !== 'eos'" style="position: relative;">
              <p>{{ $t('ndxStake.getCpu') }}</p>
            </li>
            <li v-else style="line-height: 20px; height: 60px; padding-top: 10px; position: relative;">
              <i class="iconfont icon-huaban85"></i>
              <p>{{ $t('ndxStake.getCpu') }}</p>
              <p class="lookDetail" @click="$router.push({name:'getCpu'})">
                <span>{{ $t('ndxStake.admin') }} ></span>
              </p>
            </li> -->
            <!-- 免CPU挂单 -->
            <template v-if="$store.state.app.scatter.chain === 'eos'">
              <li v-if="$store.state.app.language === 'en'" style="line-height: 20px; height: 60px; padding-top: 10px;">
                {{ $t('ndxStake.cpuFreePend') }}
              </li>
              <li v-else>
                {{ $t('ndxStake.cpuFreePend') }}
              </li>
            </template>
            <!-- 匿名交易 -->
            <li v-if="$store.state.app.language === 'en'" style="padding-top: 10px; line-height: 20px; height: 60px;">
              {{ $t('ndxStake.namelessTrading') }}
            </li>
            <li v-else>{{ $t('ndxStake.namelessTrading') }}</li>
            <li>{{ $t('ndxStake.positionStatistics') }}</li>
            <li v-if="$store.state.app.language === 'en'" style="line-height: 20px; height: 80px; padding-top: 20px;">
              <p>{{ $t('ndxStake.remind') }}</p>
              <p>(per day)</p>
            </li>
            <li v-else>{{ $t('ndxStake.remind') }}</li>
            <li style="padding: 0 5px;" :style="$store.state.app.language === 'en' ? 'line-height: 20px;' : ''">{{ $t('ndxStake.marketRemind') }}</li>
            <li>{{ $t('ndxStake.orderExport') }}</li>
          </ul>
        </div>
        <div class="tableContentWrap">
          <div class="tableContent">
            <div class="flexb">
              <ul v-for="(item, index) in ruleList" :key="index" :class="{'lvBack': item.lvCheck}">
                <li v-if="item.level === 0">{{ $t('ndxStake.juniorMember') }}</li>
                <li v-else>VIP {{ item.level }}</li>
                <!-- 升级方式1 -->
                <li>{{ item.ndxConsume }}</li>
                <!-- 升级方式2 -->
                <li v-if="item.level === 0">＜ {{ item.ndxStaked }}</li>
                <li v-else>≥ {{ item.ndxStaked }}</li>
                <!-- 手续费优惠 -->
                <li v-if="item.level === 0">{{ $t('ndxStake.none') }}</li>
                <li v-else-if="item.level && $store.state.app.language === 'zh-CN'">
                  {{ Number(accMul(item.discountRate, 10)) }}折
                </li>
                <li v-else-if="item.level && $store.state.app.language !== 'zh-CN'">
                  {{ 100 - Number(accMul(item.discountRate, 100)) || 0 }}% off
                </li>
                <!-- 每日抽奖 -->
                <li v-if="$store.state.app.language !== 'en' && $store.state.app.scatter.chain !== 'eos'" style="height: 40px; line-height: 40px;">
                  {{ $t('ndxStake.none') }}
                </li>
                <li v-else-if="$store.state.app.language === 'en' &&
                  $store.state.app.scatter.chain !== 'eos'"
                  style="height: 60px; line-height: 60px;">
                  {{ $t('ndxStake.none') }}
                </li>
                <li v-else-if="item.drawCount && $store.state.app.language === 'en'"
                  style="height: 80px; line-height: 80px;">
                  <p>{{ item.drawCount }} time(s)</p>
                </li>
                <li v-else-if="item.drawCount && $store.state.app.language !== 'en'"
                  style="height: 60px; line-height: 60px;">
                  <p>{{ $t('activity.times1') }}{{ item.drawCount }}{{ $t('activity.times2') }}</p>
                </li>
                <li v-else-if="!item.drawCount && $store.state.app.language === 'en'"
                  style="height: 80px; line-height: 80px;">
                  <!-- <i class="iconfont icon-meiyou color2"></i> -->
                  {{ $t('ndxStake.none') }}
                </li>
                <li v-else-if="!item.drawCount && $store.state.app.language !== 'en'"
                  style="height: 60px; line-height: 60px;">
                  <!-- <i class="iconfont icon-meiyou color2"></i> -->
                  {{ $t('ndxStake.none') }}
                </li>
                <!-- 专属空投 -->
                <li v-if="$store.state.app.scatter.chain !== 'eos'">
                  {{ $t('ndxStake.none') }}
                </li>
                <li v-else-if="item.specialAirdrop" style="height: 60px;white-space: normal; line-height: 60px;">
                  <!-- <i class="iconfont icon-you2 color1"></i> -->
                  <template v-if="$store.state.app.language === 'ko'">
                    <div style="line-height: 20px; padding-top: 10px;">
                      {{ $t('candyBox.weightAirdrop1') }}{{item.weight}}
                    </div>
                  </template>
                  <template v-else>
                    <div>
                      {{ $t('candyBox.weightAirdrop1') }}{{item.weight}}
                    </div>
                  </template>
                </li>
                <li v-else style="line-height: 60px; height: 60px;">
                  {{ $t('ndxStake.none') }}
                </li>
                <!-- 免费CPU -->
                <!-- <template v-if="$store.state.app.scatter.chain === 'eos'">
                  <li v-if="item.freeCpuQuota" style="line-height: 60px; height: 60px;">
                    {{item.freeCpuQuota}} EOS
                  </li>
                  <li v-else style="line-height: 60px; height: 60px;">
                    {{ $t('ndxStake.none') }}
                  </li>
                </template>
                <template v-else>
                  <li v-if="item.freeCpuQuota" style="line-height: 40px; height: 40px;">
                    {{item.freeCpuQuota}} EOS
                  </li>
                  <li v-else style="line-height: 40px; height: 40px;">
                    {{ $t('ndxStake.none') }}
                  </li>
                </template> -->
                <!-- 免CPU挂单 -->
                <template v-if="$store.state.app.scatter.chain === 'eos'">
                  <li v-if="item.freeOrderQuota && $store.state.app.language === 'en'" style="line-height: 60px; height: 60px">
                    <p>{{ item.freeOrderQuota }} time(s)</p>
                  </li>
                  <li v-else-if="!item.freeOrderQuota && $store.state.app.language === 'en'" style="line-height: 60px; height: 60px">
                    {{ $t('ndxStake.none') }}
                  </li>
                  <li v-else-if="item.freeOrderQuota && $store.state.app.language !== 'en'">
                    <p>{{ $t('activity.times1') }}{{ item.freeOrderQuota }}{{ $t('activity.times2') }}</p>
                  </li>
                  <li v-else>
                    {{ $t('ndxStake.none') }}
                  </li>
                </template>
                <!-- 匿名交易 -->
                <template v-if="$store.state.app.language === 'en'">
                  <li v-if="item.anonymous" style="line-height: 60px; height: 60px;">
                    <i class="iconfont icon-you2 color1"></i>
                  </li>
                  <li v-else style="line-height: 60px; height: 60px;">
                    {{ $t('ndxStake.none') }}
                  </li>
                </template>
                <template v-else>
                  <li v-if="item.anonymous">
                    <i class="iconfont icon-you2 color1"></i>
                  </li>
                  <li v-else>
                    {{ $t('ndxStake.none') }}
                  </li>
                </template>
                <!-- 盈亏统计 -->
                <li v-if="item.holdStatistics">
                  <i class="iconfont icon-you2 color1"></i>
                </li>
                <li v-else>
                  <i class="iconfont icon-meiyou color2"></i>
                </li>
                <!-- 成交提醒 -->
                <!-- <li v-if="item.dealRemindCount && $store.state.app.language === 'en'"
                  style="height: 80px; line-height: 80px;">
                  <p>{{ item.dealRemindCount }} time(s)</p>
                </li>
                <li v-else-if="item.dealRemindCount && $store.state.app.language !== 'en'">
                  <p>{{ $t('activity.times1') }}{{ item.dealRemindCount }}{{ $t('activity.times2') }}</p>
                </li> -->
                <li v-if="item.dealRemind"
                  :style="$store.state.app.language === 'en' ? 'height: 80px; line-height: 80px;' : ''">
                  <i class="iconfont icon-you2 color1"></i>
                </li>
                <li v-else :style="$store.state.app.language === 'en' ? 'height: 80px; line-height: 80px;' : ''">
                  <i class="iconfont icon-meiyou color2"></i>
                </li>
                <!-- 行情提醒 -->
                <!-- <li>
                  <p>{{ $t('ndxStake.creatRemindNum', {number: item.marketRemindCount}) }}</p>
                </li> -->
                <li v-if="item.marketRemind">
                  <i class="iconfont icon-you2 color1"></i>
                </li>
                <li v-else>
                  <i class="iconfont icon-meiyou color2"></i>
                </li>
                <!-- 订单导出 -->
                <li v-if="item.orderReport">
                  <i class="iconfont icon-you2 color1"></i>
                </li>
                <li v-else>
                  <i class="iconfont icon-meiyou color2"></i>
                </li>
              </ul>
            </div>
          </div>
          <!-- <ul style="display: block;">
            <li class="expect">{{ $t('ndxStake.comingSoon') }}</li>
          </ul> -->
        </div>
      </div>
      <div v-else style="text-align: center;">{{$t('myWallet.noData')}}</div>
    </div>
    <div class="memberTip">
      <div class="memberTipName">
        <span>{{ $t('ndxStake.hint') }}</span>
      </div>
      <div class="memberTipContent">
        <p>{{ $t('ndxStake.hint1') }}</p>
        <p>{{ $t('ndxStake.hint2') }}</p>
        <!-- <p>{{ $t('ndxStake.hint3') }}</p> -->
        <p>{{ $t('ndxStake.hint4') }}</p>
      </div>
    </div>
  </div>
</template>

<script>

import { accMul, accDiv } from '@/utils/validate';

export default {
  name: 'LevelDescrip', // 会员等级说明
  data() {
    return {
      ruleList: '', // 等级说明列表
      language: '', // 当前语言
      url: {
        zhCN: 'https://newdex.zendesk.com/hc/zh-cn/articles/360015745751-%E8%B4%B9%E7%8E%87%E6%A0%87%E5%87%86',
        zhTW: 'https://newdex.zendesk.com/hc/zh-tw/articles/360015745751-费率说明费率说明',
        en: 'https://newdex.zendesk.com/hc/en-us/articles/360015745751-Rate-standard',
        ko: 'https://newdex.zendesk.com/hc/ko/articles/360015745751-%EC%88%98%EC%88%98%EB%A3%8C',
      },
      nowUrl: 'https://newdex.zendesk.com/hc/en-us/articles/360012588611-Rate-standard',
      user: '', // 会员信息
    }
  },
  components: {
  },
  computed: {
  },
  props: {
  },
  watch: {
    '$store.state.app.language': function listen(newVal) {
      if (newVal === 'zh-CN') {
        this.nowUrl = this.url.zhCN;
        return;
      }
      if (newVal === 'zh-TW') {
        this.nowUrl = this.url.zhTW;
        return;
      }
      if (newVal === 'ko') {
        this.nowUrl = this.url.ko;
        return;
      }
      this.nowUrl = this.url.en;
    },
    // 监听账户等级变化
    '$store.state.app.accountInfo': function change(val) {
      this.user = val;
      this.handleLevelRule();
    },
    // 添加当前等级选中状态
    '$store.state.app.scatter.identity': {
      handler: function listen() {
        this.handleLevelRule();
      },
      deep: true,
    },
  },
  created() {
    this.language = localStorage.getItem('language') || 'en';
    if (this.language === 'zh-CN') {
      this.nowUrl = this.url.zhCN;
      return;
    }
    if (this.language === 'zh-TW') {
      this.nowUrl = this.url.zhTW;
      return;
    }
    if (this.language === 'ko') {
      this.nowUrl = this.url.ko;
      return;
    }
    this.nowUrl = this.url.en;
  },
  mounted() {
    this.user = this.$store.state.app.accountInfo;
    this.handleLevelRule();
  },
  methods: {
    // 获取等级说明
    handleLevelRule() {
      this.$http.get('/levelRule/list').then((res) => {
        if (res.code !== 0) return;
        if (res.code === 0) {
          const ruleList = res.ruleList;
          ruleList[0].ndxStaked = ruleList[1].ndxStaked;
          ruleList.forEach((v, i) => {
            const vv = v;
            if (Number(vv.ndxStaked) >= 1000) {
              vv.ndxStaked = `${Number(accDiv(Number(vv.ndxStaked), 1000))}K`;
            }
            vv.lvCheck = false;
            // if (this.user && i === this.user.level) {
            //   vv.lvCheck = true;
            // }
            if (this.user && this.user.vipMode && i === this.user.stakeLevel) {
              vv.lvCheck = true;
            }
            if (this.user && !this.user.vipMode && i === this.user.consumeLevel) {
              vv.lvCheck = true;
            }
          });
          this.ruleList = ruleList;
        }
      });
    },
    // 两数相乘
    accMul(num1, num2) {
      return accMul(num1, num2)
    },
    // 两数相除
    accDiv(num1, num2) {
      return accDiv(num1, num2)
    },
  },
}
</script>

<style scoped lang="scss">
@import '@/assets/css/variables.scss';
@import '@/views/myWallet/user.scss';

$ebeef5: #ebeef5;
$noVipBg: rgb(241, 244, 254);
$bg: #FCF1E3;
$nightColor: rgba(255, 255, 255, 0.8) !important;
$nightBorderCl: rgba(255, 255, 255, 0.1) !important;
.color1 {
  color: #67C269;
}
.color2 {
  color: #EE1443;
}

.levelDescrip {
  .icon-huaban85 {
    position: absolute;
    right: 0;
    top: 0;
    color: #d81e06;
  }

  .memberContent {
    line-height: 40px;
    border-radius: 5px;

    .tableNav {
      .levelDescription {
        font-size: 15px;
        padding: 0;
      }
      span:first-child {
        color: #555;
      }

      a {
        font-size: 12px;
        color: #278EDA;
      }

      span {
        font-size: 12px;
        color: #999;
      }
    }


    .memberTable {
      border: 1px solid $ebeef5;
      border-top: none;
      align-items: baseline;

      .tableHead {
        width: 110px;

        ul {
          width: 110px;
          color: #999;
          text-align: center;
          border-right: 1px solid $ebeef5;
          border-top: 1px solid $ebeef5;


          li {
            border-bottom: 1px solid $ebeef5;
            height: 40px;
          }

          li:first-child {
            background: $noVipBg;
          }

          li:nth-child(2), li:nth-child(3) {
            line-height: 20px;
            height: 60px;
            padding-top: 10px;
            p {
              display: block;
            }
          }

          li:last-child {
            line-height: 40px;
            height: 40px;
            border-bottom: none;
          }

          .drawLi {
            height: 60px;
            line-height: 20px;
            padding-top: 10px;
          }

          .lookDetail {
            color: #999;
            cursor: pointer;

            &:hover {
              color: #278EDA;
            }
          }
        }
      }

      .tableContentWrap {
        width: 1068px;
        // overflow-y: auto;
        overflow: hidden;
        text-align: center;
      }

      .expect {
        height: 39px;
        line-height: 39px;
        color: #333;
      }

      .tableContent {
        white-space: nowrap;

        .lvBack {
          // background: $noVipBg;
          border: 1px solid #8FB5E2;
        }

        ul {
          display: inline-block;
          // width: 100%;
          color: #333;
          text-align: center;
          min-width: 97.1px;
          border: 1px solid $ebeef5;
          border-right: none;
          border-left: none;

          li {
            // min-width: 96.3px;
            border-bottom: 1px solid $ebeef5;
            height: 40px;
            // padding: 0 14px;
          }
          li:first-child {
            background: $noVipBg;
          }

          li:nth-child(2), li:nth-child(3) {
            line-height: 60px;
            height: 60px;
          }

          li:last-child {
            background: none !important;
            border-bottom: none;
            margin-top: -1px;
          }

          &:hover {
            // background: #f1f4fe;
            border: 1px solid #8FB5E2;
          }

          .drawLi {
            padding-top: 20px;
            height: 80px;
            line-height: 20px;
          }

          .noMemberDrawLi {
            padding-top: 20px;
            height: 80px;
            line-height: 20px;
          }
        }
      }
    }

    /deep/ .el-table__header-wrapper {
      line-height: 25px;
    }
  }
  .memberTip {
    line-height: 40px;
    margin-top: 30px;
    .memberTipName {
      border-bottom: 1px solid $ebeef5;

      span {
        display: inline-block;
        font-size: 15px;
        padding: 0 5px;
      }
    }
    .memberTipContent {
      padding: 20px 0 50px 6px;
      color: #999;
      p {
        line-height: 30px;
      }
    }
  }
}

.vipContent {
  .tableHead {
    ul {
      li:first-child {
        background: $bg !important;
      }
      li {
        color: #753f05;
      }
    }
  }
  .tableContent {
    li:first-child {
      background: $bg !important;
      color: #753f05;
    }
    li:last-child {
      // background: none;
      // color: #333;
    }
    ul:hover {
      // background: #fcf9f5 !important;
      border: 1px solid #E5B189 !important;
    }
    .lvBack {
      // background: #fcf9f5 !important;
      border: 1px solid #E5B189 !important;
    }
  }
}

// ::-webkit-scrollbar {
//   width: 5px;
//   height: 5px;
//   background-color: #f1f1f1;
// }

// /*定义滚动条的轨道，内阴影及圆角*/
// ::-webkit-scrollbar-track {
//   -webkit-box-shadow: inset 0 0 0 #f1f1f1;
//   border-radius: 0;
//   background-color: #f1f1f1;
// }

// /*定义滑块，内阴影及圆角*/
// ::-webkit-scrollbar-thumb {
//   /*width: 10px;*/
//   /*height: 25px;*/
//   border-radius: 1px;
//   -webkit-box-shadow: inset 0 0 0 #c1c1c1;
//   background-color: rgba(193, 193, 193, 0.7);
// }

// 夜间模式
.theme-1B1D27 {
  // .tableContentWrap::-webkit-scrollbar {
  //   width: 5px;
  //   height: 5px;
  //   background-color: rgba(0, 0, 0, 0) !important;
  // }
  // /*定义滚动条的轨道，内阴影及圆角*/
  // .tableContentWrap::-webkit-scrollbar-track {
  //   -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0) !important;
  //   border-radius: 0px;
  //   background-color: rgba(0, 0, 0, 0) !important;
  // }
  // /*定义滑块，内阴影及圆角*/
  // .tableContentWrap::-webkit-scrollbar-thumb {
  //   /*width: 10px;*/
  //   /*height: 25px;*/
  //   border-radius: 1px;
  //   -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, .5) !important;
  //   background-color: rgba(0, 0, 0, .5) !important;
  // }
  .member {
    .usertop2 {
      color: $nightColor;
    }

    .memberTipName {
      border-color: $nightBorderCl;

      span {
        color: $nightColor;
      }
    }

    .expect {
      color: rgba(255, 255, 255, 0.6) !important;
    }

    .memberContent {
      .tableNav {
        .levelDescription {
          color: $nightColor;
        }
      }

      .memberTable {
        border-color: $nightBorderCl;
        border-top: none;

        .tableHead {
          ul {
            border-color: $nightBorderCl;

            li:first-child {
              background: rgb(21, 44, 88) !important;
            }
            li {
              color: $nightColor;
              border-color: $nightBorderCl;
            }
          }
        }

        .tableContent {
          ul {
            color: $nightColor;
            border-color: $nightBorderCl;

            li {
              border-color: $nightBorderCl;
            }

            li:first-child {
              background: rgb(21, 44, 88) !important;
              color: $nightColor;
            }

            li:last-child {
              background: none !important;
            }

            &:hover {
              border: 1px solid rgba(255, 255, 255, 0.6) !important;
            }
          }

          .lvBack {
            // background: rgb(21, 44, 88) !important;
            border: 1px solid rgba(255, 255, 255, 0.6) !important;
          }
        }
      }
    }
  }
}
</style>
